<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/se-security.css">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="se-header"><h1>Security</h1></el-header>
        <el-container>
        <el-aside width="300px">
            <el-menu>
                <template v-for="o in menuList">
                    <el-submenu v-if="o.childList && o.childList.length > 0" :index="o.id">
                        <template slot="title">
                            <!--<i class="el-icon-location"></i>-->
                            <span>{{o.menuName}}</span>
                        </template>
                        <el-menu-item v-for="m in o.childList" :index="m.id" @click="handleClick(m.menuPath)">{{m.menuName}}</el-menu-item>
                    </el-submenu>

                    <el-menu-item v-else :index="o.id" @click="handleClick(o.menuPath)">{{o.menuName}}</el-menu-item>
                </template>
            </el-menu>
        </el-aside>
        <el-main class="se-main">
            <router-view></router-view>
        </el-main>
        </el-container>
    </el-container>
</div>


<script>

    const routes = [
        {
            name: 'service', path: '/service', component: httpVueLoader('component/service.vue')
        },
        {
            name: 'menu', path: '/menu', component: httpVueLoader('component/menu.vue')
        },
        {
            name: 'role', path: '/role', component: httpVueLoader('component/role.vue')
        },
        {
            name: 'user', path: '/user', component: httpVueLoader('component/user.vue')
        },
        {
            name: 'helloworld', path: '/helloworld', component: httpVueLoader('component/helloworld.vue')
        }
    ];

    const router = new VueRouter({
        routes: routes
    })

    new Vue({
        el: '#app',
        router: router,
        data: function () {
            return {
                serviceCode: "",
                dialogCreateService: false,
                menuList: [],
                tabName: "",
                showServiceTab: false,
                rules: {
                    addServiceCode: [
                        {required: true, message: '请输入服务编码', trigger: 'change'}
                    ],
                    addServiceName: [
                        {required: true, message: '请输入服务名称', trigger: 'change'}
                    ]
                }
            }
        },
        mounted: function () {
            this.selectMenuList();
        },
        methods: {
            selectMenuList: function () {
                axios.get('/se/common/selectSecurityMenu', {
                    params: {
                        serviceCode: 'security,test',
                        tree: '1'
                    }
                }).then(res => {//用function会获取不到vue data值
                    this.menuList = res.data.data;
                }).catch(function (error) {
                        console.log(error);
                    });
                },
            handleClick: function (path) {
                if (path != null && path != '') {
                    router.push({name: path});
                }
            }
        }
    });

    axios.interceptors.response.use(function (response) {
        if (!response.data.success) {
            //this.$message({  此时this不是vue对象
            Vue.prototype.$message({
                showClose: true,
                message: response.data.message,
                type: 'error'
            });
            return Promise.reject();
        }
        return response;
    });
</script>
</body>
</html>